<template>
    <div class="menu-wrapper">
        <el-form ref="sysMchForm" :model="shopgetinfo" :rules="rules" label-width="120px">
            <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
                <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
            </div>
            <div class="sysMch_header">
                <div class="sysMch_header_left">
                    <el-form-item align="left" label="代理商名称" prop="name">
                        <el-input v-model="shopgetinfo.name" style="width:235px" />
                    </el-form-item>
                    <el-form-item label="代理商简称" prop="shortName">
                        <el-input v-model="shopgetinfo.shortName" style="width:235px" />
                    </el-form-item>
                    <el-form-item label="所属商户">
                        <el-select style="width:235px" v-model="mchName" value-key="id" clearable filterable placeholder="所属商户" :filter-method="remoteMethod" @change="selectMch">
                            <el-option v-for="item in mchList" :key="item.id" :label="item.name" :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="行业版本" prop="scopeType">
                        <el-select v-model="shopgetinfo.scopeType" style="width:235px" placeholder="请选择状态" @change="scopeTypechange">
                            <el-option label="标准版" :value="1" />
                            <el-option label="餐饮版" :value="2" />
                            <el-option label="水站版" :value="3" />
                            <el-option label="商超版" :value="4" />
                            <el-option label="景区版" :value="5" />
                            <el-option label="美业版" :value="6" />
                        </el-select>
                    </el-form-item>
                </div>
                <el-form-item label="logo">
                    <single-upload :singleUploadTitle="singleUploadTitle" v-model="shopgetinfo.logo" style="display: inline-block; margin-left: 10px; width: 500px" v-if="MuchShow==true"></single-upload>
                    <img :src="shopgetinfo.logo" style="width:70px;height:70px" alt="" v-if="shopgetinfo.logo!=null&&MuchShow==false">
                    <span v-if="shopgetinfo.logo==null&&MuchShow==false">暂无</span>
                </el-form-item>
            </div>

            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="经营信息" name="first">
                    <account :mchId="detailsId" :shopgetinfo='shopgetinfo' :MuchShow='MuchShow' ref="childRules" :district='district'></account>
                </el-tab-pane>
                <el-tab-pane label="结算信息" name="security">
                  <bankinformation :shopgetinfo='shopgetinfo' :MuchShow='MuchShow'></bankinformation>
                </el-tab-pane>
            </el-tabs>
            <el-form-item v-if="isshow==true">
                <el-button type="primary" :loading="clicked" @click="updateSysOffice('sysMchForm')">
                    修 改
                </el-button>
            </el-form-item>
        </el-form>

    </div>
</template>
<style scoped>
.menu-wrapper {
    margin: 15px;
}
.font_title {
    /* font-weight: 700;
    font-size: 14px;
    color: #333; */
}
.sysMch_header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
/deep/ label {
  font-weight: 400!important;
}
</style>
<script>
import bankinformation from "../../views/sysMch/components/banklist";
import security from "../../views/sysMch/components/security";
import account from "../../views/sysMch/components/Account";
import banklist from "../../views/sysMch/components/bank";
import importtab from "../../views/sysMch/components/importtab";
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import Distpicker from "@/components/Distpicker/Distpicker";
import { find, update } from "@/api/sysMch";
import { checkUserExists } from "@/api/sysUser";
import md5 from "js-md5";
import SingleUpload from "@/components/Upload/singleUpload";
import { updateMchShop, getMchInfo } from "@/api/sysSetUp";
import { list as mchList } from "@/api/sysMch";
export default {
    name: "agent-edit",
    components: {
        Distpicker,
        SingleUpload,
        security,
        account,
        banklist,
        importtab,
      bankinformation
    },
    data() {
        return {
            isshow: true,
            activeName: "first",
            detailsId: null,
            MuchShow: true,
            singleUploadTitle: "200*200",
            shopgetinfo: {},
            mchList: [],
            mchName: "",
            singleUploadTitle: "100*100",
            id: "",
            clicked: false, // 按钮防双击
            district: { province: 350000, city: 350200, area: 350203 },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入代理商名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "长度在 2 到 20 个字符",
                        trigger: "blur",
                    },
                ],
                shortName: [
                    {
                        required: true,
                        message: "请输入代理商简称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "长度在 2 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                scopeType: [
                    {
                        required: true,
                        message: "请选择代理商版本",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    watch: {
        // 路由地址不变的情况下,如果id变化则重新获取数据
        $route(newVal, oldVal) {
            console.log(newVal);
            if (newVal.name == "agent-edit" && newVal.query.id != this.id) {
                this.getData();
            }
        },
    },

    created() {
        this.detailsId = this.$route.query.id;
        this.getData();
        this.loadMch("");
    },
    methods: {
        onSelected(val) {
            if (!utils.isNull(val.area) && !utils.isNull(val.area.code)) {
                this.form.areaId = val.area.code;
                this.form.areaName = val.area.value;
            }
        },
        handleClick(val) {
            if (val.paneName == "importtab") {
                this.isshow = false;
            } else {
                this.isshow = true;
            }
        },
        getData() {
            this.id = this.$route.query.id;
            const _this = this;
            find(this.id)
                .then((response) => {
                    console.log(
                        utils.dateFormatter(response.data.sysMch.expiredDate)
                    );
                    if (response.data.sysMch.expiredDate) {
                        response.data.sysMch.expiredDate = utils.dateFormatter(
                            response.data.sysMch.expiredDate
                        );
                    }
                    _this.shopgetinfo = response.data.sysMch;
                    _this.mchName = response.data.sysMch.parentMchName
                })
                .catch((error) => {});
        },
        scopeTypechange(val) {
            this.shopgetinfo.scopeType = val;
        },
        updateSysOffice(form) {
            const _this = this;
            this.$refs[form].validate((valid) => {
                if (valid) {
                    // 校验表单
                    let flag = this.$refs["childRules"].validateForm();
                    if (!flag) {
                        this.$message.error("信息不完整，请继续填写完整");
                        return false;
                    } else {
                        _this.clicked = true;
                        let form = JSON.parse(JSON.stringify(_this.shopgetinfo))
                        form.attachVo = form.attach
                        form.attach = JSON.stringify(form.attach)
                        update(form)
                            .then((response) => {
                                console.log(response);
                                _this.clicked = false;
                                EventBus.$emit("agent-edit", response.data);
                                _this.$store
                                    .dispatch("tagsView/delView", _this.$route)
                                    .then(({ visitedViews }) => {
                                        _this.$router.push({
                                            path: "/agent/list",
                                        });
                                    }); // 关闭当前tab回到列表
                            })
                            .catch((error) => {
                                _this.clicked = false;
                            });
                    }
                } else {
                    return false;
                }
            });
        },
        remoteMethod(query) {
            this.loadMch(query);
        },
        loadMch(query) {
            var _this = this;
            let params = new URLSearchParams();
            params.append("name", query);
            mchList(params)
                .then((response) => {
                    _this.mchList = response.data.data;
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
        selectMch(e) {
            console.log(e);
            if (!utils.isNull(e)) {
                this.mchName = e.name;
                this.shopgetinfo.parentMchId = e.id;
            } else {
                this.mchName = "";
                this.shopgetinfo.parentMchId = "";
            }
        },
    },
};
</script>
